<script setup lang="ts">
import { propertyAddApi, propertyEditApi } from '@/apis/property'
import type { PropertyI } from '@/types/property.d.ts'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'

defineProps(['dialogVisible', 'enList', 'buildingList'])
const emit = defineEmits(['update:dialogVisible', 'success'])
const title = ref('添加账单')
const defaultParams = {
  id: undefined,
  enterpriseId: undefined,
  buildingId: undefined,
  startTime: '',
  endTime: '',
  paymentAmount: undefined,
  paymentMethod: undefined,
}
const params = ref<PropertyI>({
  id: undefined,
  enterpriseId: undefined,
  buildingId: undefined,
  startTime: '',
  endTime: '',
  paymentAmount: undefined,
  paymentMethod: undefined,
})
const timeList = ref<string[]>([])
watch(
  timeList,
  (val) => {
    if (val) {
      params.value.startTime = val[0]
      params.value.endTime = val[1]
    } else {
      params.value.startTime = ''
      params.value.endTime = ''
    }
  },
  { deep: true },
)
const rules = {
  enterpriseId: [{ required: true, message: '请选择租户', trigger: 'blur' }],
  buildingId: [{ required: true, message: '请选择楼宇', trigger: 'blur' }],
  startTime: [{ required: true, message: '缴费周期', trigger: 'blur' }],
  paymentAmount: [
    { required: true, message: '请输入支付金额', trigger: 'blur' },
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'blur' },
  ],
}
const formRef = ref()
const closeDialog = () => {
  emit('update:dialogVisible', false)
  params.value = { ...defaultParams }
  timeList.value = []
  formRef.value.resetFields()
}
const onSubmit = async () => {
  await formRef.value.validate()
  await propertyAddApi(params.value)
  ElMessage.success('添加成功~')
  emit('success')
  closeDialog()
}
</script>

<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="title"
    style="width: 35%"
    top="10vh"
    @close="closeDialog"
  >
    <el-form label-position="top" ref="formRef" :model="params" :rules="rules">
      <el-form-item label="选择租户" prop="enterpriseId">
        <el-select placeholder="请选择租户" v-model="params.enterpriseId">
          <el-option
            v-for="item in enList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="租赁楼宇" prop="buildingId">
        <el-select placeholder="请选择租赁楼宇" v-model="params.buildingId">
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="缴费周期" prop="startTime">
        <el-date-picker
          v-model="timeList"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="支付金额" prop="paymentAmount">
        <el-input
          type="number"
          placeholder="请输入支付金额"
          v-model="params.paymentAmount"
          :min="1"
        />
      </el-form-item>
      <el-form-item label="支付方式" prop="paymentMethod">
        <el-select placeholder="请选择支付方式" v-model="params.paymentMethod">
          <el-option label="微信" :value="1"></el-option>
          <el-option label="支付宝" :value="2"></el-option>
          <el-option label="现金" :value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  width: 70%;
  margin: 0 auto;

  ::v-deep(.el-form-item__label) {
    color: rgb(39, 39, 39);
    font-weight: 500;
  }
}
</style>
